{% extends 'myhome/base.html' %}

    {% block title %}
    <title>BookShop-注册</title>
    {% endblock %}

    {% block con %}
    <!-- breadcrumbs-area-start -->
    <div class="breadcrumbs-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumbs-menu">
                        <ul>
                            <li><a href="{% url 'myhome_index' %}">首页</a></li>
                            <li><a href="#" class="active">注册</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumbs-area-end -->
    <!-- user-login-area-start -->
    <div class="user-login-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="login-title text-center mb-30">
                        <h2>注册</h2>
                    </div>
                </div>
                <div class="col-lg-offset-4 col-lg-4 col-md-offset-3 col-md-6 col-sm-12 col-xs-12">
                    <form action="{% url 'myhome_register' %}" method="POST">
                        {% csrf_token %}
                        <div class="login-form">
                            <div class="single-login">
                                <label>用户名<span>*</span></label>
                                <input type="text" name="username" required/>
                            </div>
                            <div class="single-login">
                                <label>手机号<span>*</span></label>
                                <input type="text" name="phone" required/>
                            </div>
                            <div class="single-login">
                                <label>密码<span>*</span></label>
                                <input type="password" name="password" required/>
                            </div>
                            <div class="single-login">
                                <label>确认密码</label>
                                <input type="password" name="repassword" required/>
                            </div>
                            <div class="single-login" style="position:relative;">
                                <label>验证码</label>
                                <input type="text"  />
                                <a href="javascript:void(0);" style="position:absolute;top:28px;right:0px;border:none;">
                                    发送短信验证码
                                </a>
                            </div>
                            <div class="single-login single-login-2 col-md-offset-4">
                                <a id="register" href="javascript:void(0);">
                                    注册
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- user-login-area-end -->
    {% endblock %}

    {% block myjs %}
    <script>
        var isphone = false
        var ispassword = false
        var isrepassword = false
        // 给注册的a标签绑定单击事件
        $('#register').click(function(){
            // 找到对应的表单，触发表单事件
            $(this).parents('form').submit()
        })

        // 给表单绑定表单提交事件
        $('form').submit(function(){
            // 触发所有input的丧失焦点事件
            $('input').trigger('blur')
            // 验证手机号、密码、确认密码是否都正确
            if(isphone && ispassword && isrepassword){
                return true
            }else{
                return  false
            }
        })

        // 给手机号绑定丧失焦点事件，验证手机号是否可用
        $('input[name=phone]').blur(function(){
            // 获取输入的手机号
            phone = $(this).val()

            // 验证手机号格式是否正确
            reg = /^1\d{10}$/
            if(! reg.test(phone)){
                // 手机号格式不正确
                $(this).css('border','1px solid red')
                isphone = false
                return
            }

            // 如果手机号格式正确，再验证手机号是否已经注册
            $.get('{% url "myhome_checkphone" %}',{'phone':phone},function(data){
                // 调用执行验证的函数，判断返回的结果
                if(data['code'] == 0){
                    isphone = true
                    $('input[name=phone]').css('border','1px solid green')
                }else{
                    alert(data['msg'])
                    isphone = false
                    $('input[name=phone]').css('border','1px solid red')
                }
            },'json')
        })

        // 验证密码
        $('input[name=password]').blur(function(){
            // 获取输入的密码
            password = $(this).val()
            // 验证密码格式是否正确
            reg = /^\w{6,18}$/
            if(reg.test(password)){
                $(this).css('border','1px solid green')
                ispassword = true
            }else{
                $(this).css('border','1px solid red')
                ispassword = false
            }
        })

        // 验证确认密码
        $('input[name=repassword]').blur(function(){
            // 获取原密码和确认密码
            password = $('input[name=password]').val()
            repassword = $(this).val()
            // 验证确认密码格式是否正确，同时是否与原密码相同
            reg = /^\w{6,18}$/
            if(reg.test(repassword) && repassword == password){
                $(this).css('border','1px solid green')
                isrepassword = true
            }else{
                $(this).css('border','1px solid red')
                isrepassword = false
            }
        })

    </script>
    {% endblock %}






















